<template>
    <div class="header">
        <div class="site-nav-bd">
            <ul class="site-nav-bd-l">
                <li class="site-nav-menu">
                    <router-link :to="{name:'home'}" target="_top" class="homeBtn" v-show="$route.name !== 'home'">
                        <i class="el-icon-s-home" style="font-size: 13px;color: rgb(255,0,54);margin-right: 4px;"></i>杂货店首页
                    </router-link>
                </li>
                <li class="site-nav-menu">
                    <template v-if="!isLogined">
                        <router-link :to="{name:'login'}" target="_top" class="loginBtn">亲，请登录</router-link>
                        <router-link :to="{name:'register'}" target="_top" class="registBtn">免费注册</router-link>
                    </template>

                    <el-dropdown show-timeout="0" v-else>
                        <span class="el-dropdown-link">
                            {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="site-nav-user">
                            <div class="site-nav-user-wrapper">
                                <a href="javascript:;"
                                   target="_top"
                                   class="site-nav-user-avatar">
                                    <el-avatar :size="56"
                                               fit="contain"
                                               :src="avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                                               class="site-nav-user-avatar"
                                               :alt="name+'的头像'"></el-avatar>
                                </a>
                            </div>
                            <div class="site-nav-user-info">
                                <p class="site-nav-user-operate">
                                    <a href="javascript:;"
                                       target="_top">账号管理</a>
                                    <span class="site-nav-pipe">|</span>
                                    <a href="javascript:;" @click="logout" target="_top">退出登录</a>
                                </p>
                                <p class="level-info tao-score">淘气值：553</p>
                                <p class="level-info ">普通会员</p>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
                <li class="site-nav-menu right">
                    <i class="el-icon-shopping-cart-2"></i>
                    <router-link :to="{name:'cart'}" target="_top" class="shopping-cart">我的购物车</router-link>
                </li>
                <li class="site-nav-menu right">
                    <i class="el-icon-eleme"></i>
                    <a href="https://gitee.com/mr_xsf/JieYou" target="_top" class="shopping-cart">我的Gitee</a>
                </li>
                <li class="site-nav-menu right">
                    <i class="el-icon-user"></i>
                    <router-link :to="{name:'mine'}" target="_top" class="shopping-cart">我的解忧</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: "Header",
        computed: {
            ...mapGetters([
                /*用户名*/
                'name',
                /*头像*/
                'avatar'
            ]),
            /*是否已登录*/
            isLogined() {
                return this.name !== null && this.name !== ""
            }
        },
        methods: {
            /*注销登录*/
            async logout() {
                this.$emit('setLoading', true)

                try {
                    await this.$store.dispatch('user/logout')

                    // 刷新页面，以判断当前页面是否需要权限控制
                    this.$router.go(0)

                    this.$message.success('帐号注销成功！')
                } finally {
                    this.$emit('setLoading', false)
                }
            }
        },
    }
</script>

<style lang="less" scoped>
    * {
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }

    // 已登录用户显示
    .site-nav-user {
        padding: 10px;
        box-sizing: border-box;
        width: 260px;

        .site-nav-user-wrapper {
            float: left;
            margin-right: 10px;
            margin-left: 9px;
            padding: 9px;
            box-sizing: content-box;

            a.site-nav-user-avatar {
                display: block;
                overflow: hidden;
                border: 3px solid #fff;
                border-radius: 50%;
            }
        }

        .site-nav-user-info {
            height: 80px;
            overflow: hidden;

            p {
                height: 20px;
                width: 139px;
                line-height: 20px;
                overflow: hidden;

                a {
                    color: #3c3c3c;
                    text-decoration: none;
                }

                a:hover {
                    text-decoration: underline;
                    color: rgb(255, 68, 0);
                }

                .site-nav-pipe {
                    padding: 0 5px;
                    font-style: normal;
                    color: #ddd;
                }
            }

            p:first-child {
                margin-bottom: 10px;
                text-align: right;
            }
        }
    }


    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #f5f5f5;
        border-bottom: 1px solid #eee;
        height: 35px;
        z-index: 999;

        .site-nav-bd {
            height: 100%;
            width: 1200px;
            margin: auto;
            color: #f22e00;

            .site-nav-bd-l {
                height: 100%;

                li.site-nav-menu {
                    float: left;
                    line-height: 35px;
                    height: 100%;

                    a {
                        text-decoration: none;
                        margin-right: 7px;
                    }

                    a:hover {
                        text-decoration: underline;
                    }

                    .homeBtn {
                        color: #6C6C6C;
                        margin-right: 50px;
                    }

                    .loginBtn {
                        color: #f22e00;
                    }

                    .registBtn {
                        color: #6C6C6C;
                    }
                }

                li.site-nav-menu.right {
                    float: right;
                    margin-left: 20px;

                    a {
                        color: #6C6C6C;
                    }

                    i {
                        font-size: 15px;
                        margin-right: 3px;
                    }
                }
            }
        }


    }
</style>